<template>
  <div>
    <!-- 工具栏区域 -->
    <table-bar :showTop="false"
               :columns="columns"
               @changeColumn="changeColumn">
      <!-- 条件查询区域 -->
      <div slot="top">
        产品类型：
        <el-input v-model="processingType"
                  class="searchInput"></el-input>
        <!-- <el-select v-model="processingType" filterable placeholder="请选择" class="searchInput">
          <el-option v-for="item in coldOutData" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select> -->
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        查询时间段：
        <el-time-picker is-range
                        v-model="time"
                        range-separator="至"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        placeholder="选择时间范围"></el-time-picker>
        <span class="searchBtn">
          <el-button type="primary">搜索</el-button>
          <el-button>重置</el-button>
        </span>
      </div>
      <!-- 左侧按钮 -->
      <div slot="bottom">
        <el-button type="primary"
                   plain
                   @click="add">新增出库产品</el-button>
        <el-button type="danger"
                   plain>批量删除</el-button>
      </div>
    </table-bar>

    <el-table
      :data="coldOutData"
      style="width: 100%"
      class="table"
      ref="CSOutInfo"
    >
      <el-table-column type="selection" width="65"></el-table-column>
      <el-table-column
        prop="consignee"
        label="商家编号"
        v-if="columns[0].show"
        width="210"
      ></el-table-column>
      <el-table-column
        prop="totalAmount"
        label="数量（只）"
        v-if="columns[1].show"
        width="210"
      ></el-table-column>
      <el-table-column
        prop="handler"
        label="经手人"
        v-if="columns[2].show"
        width="210"
      ></el-table-column>
      <el-table-column
        prop="outTime"
        label="出库时间"
        v-if="columns[3].show"
        width="210"
      ></el-table-column>
      <el-table-column label="操作" v-if="columns[4].show">
        <template slot-scope="scope">
          <el-button
            type="text"
            icon="el-icon-share"
            @click="checkDetail(scope.row.id)"
            >详情</el-button
          >
          <el-button
            type="text"
            icon="el-icon-edit"
            @click="edit(scope.row)"
            >修改</el-button
          >
          <el-button
            type="text"
            icon="el-icon-delete"
            style="color: #FA6962"
            @click="deleteById(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页模块 -->
    <div style="text-align: center;">
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="pageInfo.currentPage"
                     :page-sizes="[5, 10, 20, 50, 100]"
                     :page-size="pageInfo.pageSize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </div>

    <!-- 添加框 -->
    <OutStorage
      :addForm="addForm"
      :title="'新增订单'"
      :dialogVisible="addDialogVisible"
      @closeAddDialog="closeAddDialog"
      @closeAddDialogB="closeAddDialogB"
      v-show="addDialogVisible"
      @addDisplayData="addDisplayData"
    />

    <!-- 详情框 -->
    <el-dialog title="详情" :visible.sync="detailDialogVisible" width="78%">
      <el-table :data="detailForm" style="width: 100%">
        <el-table-column prop="typeId" label="产品编号" width="100">
        </el-table-column>
        <el-table-column prop="batchId" label="加工批次" width="150">
        </el-table-column>
        <el-table-column prop="processingType" label="加工产品类型名" width="150">
        </el-table-column>
        <el-table-column prop="unitPrice" label="单价" width="100">
        </el-table-column>
        <el-table-column prop="amount" label="数量" width="100">
        </el-table-column>
        <el-table-column prop="price" label="总价" width="100">
        </el-table-column>
        <el-table-column prop="remark" label="备注" width="150">
        </el-table-column>
        <el-table-column prop="gmtCreate" label="创建时间" width="150">
        </el-table-column>
        <el-table-column prop="gmtModified" label="修改时间" width="150">
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="detailDialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>

    <!-- 修改框 -->
    <EditDialog
      :editForm="editForm"
      :title="'修改订单'"
      :dialogVisible="editDialogVisible"
      :tempId="tempId"
      @closeEditDialog="closeEditDialog"
      @closeEditDialogB="closeEditDialogB"
      v-show="editDialogVisible"
      @editDisplayData="editDisplayData"
    />
  </div>
</template>

<script>
import OutStorage from '@/components/Process/OutStorage.vue';
import EditDialog from '@/components/Process/CSOutEditDialog.vue';
import {
  getProcessCOut,
  getDetailById,
  deleteStorage
} from '@/api/Process/CStorageOut'

export default {
  name: "ColdStorageOut",
  meta: {
    title: "冷库出库",
  },
  components: {
    // OutStorage: () => import('@/components/Process/OutStorage.vue')
    OutStorage,
    EditDialog
  },
  data () {
    return {
      columns: [
        { name: "商家编号", show: true },
        { name: "数量（只）", show: true },
        { name: "经手人", show: true },
        { name: "出库时间", show: true },
        { name: "操作", show: true }
      ],
      coldOutData: [],
      pageInfo: {
        currentPage: 1,
        pageSize: 5
      },
      total: 1,
      addDialogVisible: false,
      editDialogVisible: false,
      detailDialogVisible: false,
      searchText: '',
      time: '',
      processingType: '',
      tempId: '',
      addForm: {},
      editForm: {},
      detailForm: {}
    }
  },
  created () {
    this.getProcessCOut()
  },
  computed: {
    select_processingId () {
      return this.$store.state.Usersetting.ProcessInfo.processingId
    }
  },
  methods: {
    async getProcessCOut () {
      const { data: res } = await getProcessCOut(this.pageInfo.currentPage, this.pageInfo.pageSize, this.select_processingId)
      if (res.statusCode !== 20000) {
        console.log(res)
        return this.$message.error(res.message)
      }
      console.log('res')
      console.log(res)
      console.log('res')
      this.coldOutData = res.data.records
      this.total = res.data.total
      this.pageInfo.pageSize = res.data.size
      this.pageInfo.currentPage = res.data.current
    },
    // 页面列表数改变
    handleSizeChange (newSize) {
      this.pageInfo.pageSize = newSize
      this.getProcessCOut()
    },
    // 页数改变
    handleCurrentChange (newPage) {
      this.pageInfo.currentPage = newPage
      this.getProcessCOut()
    },
    //打开新增表单
    add() {
      this.addDialogVisible = true;
      this.addForm = {
        consignee: "",
        handler: "",
        name: "",
        outProcessingBillDtos: [
          {
            amount: 0,
            batchId: "",
            price: 0,
            processingType: "",
            remark: "",
            typeId: 0,
            unitPrice: 0
          }
        ],
        outTime: "",
        processingId: this.select_processingId,
        remark: "",
        total: 0,
        totalAmount: 0
      };
    },
    //关闭新增表单
    closeAddDialog(a) {
      //是否打开详情表单
      // this.detailDialog = a;
      //是否新增打开表单
      this.addDialogVisible = a;
      this.addForm = {
        consignee: "",
        handler: "",
        name: "",
        outProcessingBillDtos: [
          {
            amount: 0,
            batchId: "",
            price: 0,
            processingType: "",
            remark: "",
            typeId: 0,
            unitPrice: 0
          }
        ],
        outTime: "",
        processingId: this.select_processingId,
        remark: "",
        total: 0,
        totalAmount: 0
      };
      this.getProcessCOut();
    },
    //是否新增打开表单
    closeAddDialogB(a) {
      this.addDialogVisible = a;
      this.addForm = {
        consignee: "",
        handler: "",
        name: "",
        outProcessingBillDtos: [
          {
            amount: 0,
            batchId: "",
            price: 0,
            processingType: "",
            remark: "",
            typeId: 0,
            unitPrice: 0
          }
        ],
        outTime: "",
        processingId: this.select_processingId,
        remark: "",
        total: 0,
        totalAmount: 0
      };
      this.getProcessCOut();
    },
    addDisplayData() {
      this.getProcessCOut();
    },
    //打开修改表单
    async edit(info) {
      this.editDialogVisible = true;
      const { data: res } = await getDetailById(info.id);
      this.tempId = info.id;
      this.editForm = {
        consignee: info.consignee,
        handler: info.handler,
        name: info.name,
        outProcessingBillDtos: res.data,
        outTime: info.outTime,
        processingId: this.select_processingId,
        remark: "",
        total: info.totalMoney,
        totalAmount: info.totalAmount
      };
    },
    //关闭修改表单
    closeEditDialog(a) {
      //是否打开详情表单
      // this.detailDialog = a;
      //是否修改打开表单
      this.editDialogVisible = a;
      this.editForm = {
        consignee: "",
        handler: "",
        name: "",
        outProcessingBillDtos: [
          {
            amount: 0,
            batchId: "",
            price: 0,
            processingType: "",
            remark: "",
            typeId: 0,
            unitPrice: 0
          }
        ],
        outTime: "",
        processingId: this.select_processingId,
        remark: "",
        total: 0,
        totalAmount: 0
      };
      this.getProcessCOut();
    },
    //是否修改打开表单
    closeEditDialogB(a) {
      this.editDialogVisible = a;
      this.editForm = {
        consignee: "",
        handler: "",
        name: "",
        outProcessingBillDtos: [
          {
            amount: 0,
            batchId: "",
            price: 0,
            processingType: "",
            remark: "",
            typeId: 0,
            unitPrice: 0
          }
        ],
        outTime: "",
        processingId: this.select_processingId,
        remark: "",
        total: 0,
        totalAmount: 0
      };
      this.getProcessCOut();
    },
    editDisplayData() {
      this.getProcessCOut();
    },
    // 查看详情
    async checkDetail(id) {
      this.detailDialogVisible = true;
      console.log(id, 66666);
      const { data: res } = await getDetailById(id);
      console.log(res);
      this.detailForm = res.data;
    },
    // columns改变
    changeColumn (columns) {
      this.columns = columns
      this.$refs.flowListRef.doLayout()
    },
    // 删除
    deleteById(id) {
      this.$confirm(
        "是否永久删除该产品的库存信息（此操作不可撤销）？",
        "删除",
        {
          distinguishCancelAndClose: true,
          confirmButtonText: "删除",
          cancelButtonText: "取消",
        }
      )
        .then(async () => {
          const { data: res } = await deleteStorage(id);
          console.log(id);
          if (res.statusCode !== 20000) {
            console.log(res);
            return this.$message.error(res.message);
          }
          this.$message.warning(res.message);
          let total = this.total;
          let size = this.pageInfo.pageSize;
          this.getProcessCOut();
          if (this.pageInfo.currentPage !== 1 && total % size === 1) {
            this.pageInfo.currentPage--;
            this.getProcessCOut();
          }
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },
    // 批量删除
    bulkDeletion() {
      this.$confirm(
        "是否永久删除所有选中产品的库存信息（此操作不可撤销）？",
        "批量删除",
        {
          distinguishCancelAndClose: true,
          confirmButtonText: "删除",
          cancelButtonText: "取消",
        }
      )
        .then(async () => {
          this.$refs.CSOutInfo.selection.forEach((value) => {
            this.tempIds.push(value.outId);
          });
          const { data: res } = await batchDelete(this.tempIds);
          if(res.statusCode !== 20000) return;
          if (this.pageInfo.currentPage !== 1 && total % size === 1) {
            this.pageInfo.currentPage--;
            this.getProcessCOut();
          }
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
      console.log("this.$refs.CSOutInfo");
      console.log(this.$refs.CSOutInfo.selection);
      console.log("this.$refs.CSOutInfo");
    },
  }
}
</script>

<style lang="scss" scoped>
.searchInput {
  margin: 0px 0 18px 6px;
  width: 276px;
}

.searchBtn {
  float: right;
}

.table {
  padding-top: 14px;
  font-size: 14px;
  text-align: center !important;
  color: rgb(102, 102, 102);
}

/deep/ .el-table th {
  z-index: 99;
  text-align: center;
  line-height: 29px;
  color: rgb(102, 102, 102);
  background-color: rgb(248, 248, 248);
}

/deep/ .el-table td {
  z-index: 99;
  text-align: center;
  line-height: 29px;
}

/deep/ .el-pagination {
  padding: 15px 5px;
}

.formClass {
  text-align: left;
}
</style>